<template>
  <el-select
    v-model="comValue"
    :disabled="disabled"
    placeholder="请选择"
    :style="{ width: width }"
    :clearable="clearable"
    @change="change"
    :max-collapse-tags="maxCollapseTags"
    :multiple="multiple"
    collapse-tags
    collapse-tags-tooltip
  >
    <el-option
      v-for="(item, i) in options"
      :key="i"
      :label="item[customOptionsName['label']]"
      :value="item[customOptionsName['value']]"
    />
  </el-select>
</template>

<script setup>
import { get_area_list_by_parentcode } from '@/api/system.js'
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: [Array, String],
    require: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '100%'
  },
  clearable: {
    type: Boolean,
    default: true
  },
  apiUrl: {
    type: String
  },
  searchForm: {
    type: Object
  },
  maxCollapseTags: {
    type: [String, Number],
    default: 5
  },
  customOptionsName: {
    type: Object,
    default: () => {
      return {
        label: 'name',
        value: 'id'
      }
    }
  },
  areaObj: {
    type: Object,
    default: {}
  },
  multiple: {
    type: Boolean,
    default: true
  }
})

let comValue = ref([])
const options = ref([])
const getOptions = async () => {
  let res = await get_area_list_by_parentcode(props.areaObj.streetCode)
  if (res.succeed) {
    options.value = res.data
  }
}

watch(
  () => props.areaObj,
  val => {
    if (props.areaObj.streetCode) {
      getOptions()
    }
  },
  {
    immediate: true
  }
)

watch(
  () => props.modelValue,
  val => {
    if (val) {
      comValue.value = val
    } else {
      comValue.value = props.multiple ? [] : ''
    }
  },
  {
    immediate: true
  }
)

watch(
  () => comValue.value,
  (newVal, oldVal) => {
    emit('update:modelValue', newVal)
  }
)

const change = val => {
  console.log(val)
  let arr = []
  if (props.multiple) {
    if (val && val.length > 0) {
      for (let i = 0; i < options.value.length; i++) {
        for (let j = 0; j < val.length; j++) {
          if (options.value[i].id == val[j]) {
            arr.push({
              level: options.value[i].level,
              provinceCode: props.areaObj.provinceCode,
              provinceName: props.areaObj.provinceName,
              cityCode: props.areaObj.cityCode,
              cityName: props.areaObj.cityName,
              countyCode: props.areaObj.countyCode,
              countyName: props.areaObj.countyName,
              streetCode: props.areaObj.streetCode,
              streetName: props.areaObj.streetName,
              communityCode: options.value[i].id,
              communityName: options.value[i].name
            })
          }
        }
      }
    }
  } else {
    for (let i = 0; i < options.value.length; i++) {
      if (options.value[i].id == val) {
        arr.push({
          level: options.value[i].level,
          code: options.value[i].id,
          name: options.value[i].name
        })
      }
    }
  }

  emit('change', arr)
}
</script>

<style lang="scss" scoped></style>
